<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Marquee - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        body {
            background: #0a0a0a;
            perspective: 400px;
            transform-style: preserve-3d;
        }

        .marquee {
            transform: rotateX(45deg);
        }

        .star-wars {
            background: #0a0a0a;
            color: #feda4a!important;
        }

        .scene {
            width: 600px;
            position: relative;
            display: block;
            font-size: 300%;
            font-weight: 600;
            line-height: 150%;
            font-family: 'Pathway Gothic One', sans-serif;
        }

        .scene p:not(.st) {
            white-space: normal!important;
            font-size: 60%;
            line-height: 1.2;
            text-align: justify;
        }

        .tt {
            font-size: 130%;
        }
    </style>
</head>
<body class="m4-cloak h-vh-100">
<div class="container h-100 d-flex flex-align-center flex-column">
    <h1 class="w-50 text-center fg-cyan">A long time ago in a galaxy far, far, away...</h1>
    <div class="w-100 mt-20"
         data-role="marquee"
         data-duration="12000"
         data-accent-pause="3000"
         data-direction="up"
         data-height="500"
         data-background-color="#0a0a0a"
         data-loop="true"
         data-first-pause="5000"
    >
        <div class="star-wars">
            <div class="scene">
                <div class="title text-center">
                    <p class="st">Episode IV</p>
                    <div class="tt">A New Hope</div>
                </div>

                <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>

                <p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>

                <p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy….</p>
            </div>
        </div>
    </div>
</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    $(function(){
    })
</script>
</body>
</html>
